<template>
  <div>

    <div style="margin: 30px 0">
      <a-input-search placeholder="请输入搜索名字" style="width: 200px;margin-right: 10px" enter-button @search="onSearch" />
      <a-button type="primary" @click="saleAdd" icon="plus">添加成员</a-button>
      <SaleAdd
          v-if="saleType"
          :saleText="saleText"
          :saleType="saleType"
          v-on:saleOk="saleOk"
          v-on:saleCancel="saleCancel"
          :lists="lists"
      />
    </div>
    <a-table
        :columns="columns"
        :data-source="data"
        :pagination="filterList"
        @change="handleChangeCurrent"
    >
      <!-- 操作自定义样式 -->
      <div slot="action" slot-scope="text,record">
        <a-button type="primary" style="margin-right: 10px" @click="edit(record)" icon="edit">编辑</a-button>
        <a-button type="danger" icon="delete" @click="del(record.id)">删除</a-button>
      </div>
    </a-table>
  </div>
</template>
<script>
//  引入添加及编辑的组件
import SaleAdd from './components/SaleAdd';
import { marketDel, marketList } from '@/services/photoList';
//  引入批量导入的组件
// import Channel from './components/Channel';


const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
  },
  {
    title: '姓名',
    dataIndex: 'username',
    key: 'username',
    align: 'center',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
    align: 'center',
  },
  {
    title: '公司',
    key: 'company',
    dataIndex: 'company',
    align: 'center',
    ellipsis: 'true'
  },
  {
    title: '手机号',
    key: 'phone',
    dataIndex: 'phone',
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center'
  },
  {
    title: '简介',
    dataIndex: 'introduction',
    key: 'introduction',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'center',
    width: 210,
    scopedSlots: { customRender: 'action' }
  }
];

const data = [];

export default {
  name: 'SaleList',
  inject: ['reload'],
  components: {
    SaleAdd
  },
  data() {
    return {
      data,
      columns,
      //  添加 modal 的标题
      saleText: '',
      //  添加 modal 的状态
      saleType: false,
      //  Check here to configure the default column
      selectedRowKeys: [],
      loading: false,
      //  编辑时prop传入的数据
      lists: {},
      //  分页
      filterList: {
        total: 1,
        pageNo: 1,
      },
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  mounted() {
    this.marketList()
  },
  methods: {
    marketList() {
      const {pageNo} = this.filterList
      marketList({pageNo}).then(res=>{
        this.data = res.data.result.records || {}
        this.filterList.total = res.data.result.total || 1
        this.loading = false;
      })
    },
    //  搜索
    onSearch(value) {
      marketList({username: value}).then(res=>{
        this.data = res.data.result.records || {}
        this.filterList.total = res.data.result.total || 0
        this.loading = false;
      })
    },

    //  添加 modal 的提交
    saleOk(value) {
      this.saleType = value
    },
    //  添加 modal 的取消
    saleCancel(value) {
      this.saleType = value
    },
    //  新建的点击事件
    saleAdd() {
      this.saleType = !this.saleType
      this.saleText = '添加账号'
      this.lists = {}
    },
    //  编辑的点击事件
    edit(e) {
      this.saleType = !this.saleType
      this.saleText = '编辑账号'
      this.lists = e
    },
    //  删除的点击事件
    del(e) {
      marketDel({id:e}).then(res=>{
        console.log(res)
        this.$message.success(res.data.message)
        this.reload()
      })
    },
    //  分页
    handleChangeCurrent(val) {
      this.filterList.pageNo = val.current
      this.marketList()
    },
  }
};
</script>

<style  lang="less" scoped>
.a{
  align-content: center;
}
</style>
